import Base from "../base.js";
import MoviesApi from "../../api/movies.js"
import { bind } from "lodash";
// 声明一个默认基础数据
const mooveisProps = [{
    name: "电影名称",
    key: "name"
}, {
    name: "电影类型",
    key: "type"
}, {
    name: "首映地区",
    key: "cinemasId"
}, {
    name: "是否经典",
    key: "isClassic"
}, {
    name: "电影导演",
    key: "director"
}]
export default class extends Base {

    data = {
        curPage: 1, //当前也
        eachPage: 4, //每页显示条数
        total: 0, //总条数
        maxPage: 0, //总页数
        rows: [], //当前页的数据
        selIfo: [] //查询到的数据
    }

    render() {
        this.$el.html(`
        <div style="margin-top:2px;">
             <a href="/#/info/movies" style="font-size:18px;">电影列表</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
        </div>  
             <div style="text-align:center;"> 
                       
                     <h1 style="margin:30px 0px; font-size:40px;font-weight:bold;">电 影 列 表</h1>                     
                     <table border="1" class="moviesTable layui-table">
                     <div  style="width:480px; margin:20px 0;margin-left:auto;"> 
                       <span style="font-size:18px">查询类型:<span/><select name="selectOption" id="selectOption" style="height:30px;"></select>
                     <input typr="text" id="selectvalue" style="height:27px"> <button id="selBtn" class="layui-btn layui-btn-sm">查询<i class="layui-icon">&#xe615;
                    </i></button>  
                     <div/> 
                    <thead>
                        <tr>                      
                          <th style="text-align:center;font-weight:bold;font-size:18px">电影名称</th>
                          <th style="text-align:center;font-weight:bold;font-size:18px">电影类型</th>
                          <th style="text-align:center;font-weight:bold;font-size:18px">首映地区</th>
                          <th style="text-align:center;font-weight:bold;font-size:18px">电影时长</th>
                          <th style="text-align:center;font-weight:bold;font-size:18px">上映时间</th>
                          <th style="text-align:center;font-weight:bold;font-size:18px">电影海报</th>
                          <th style="text-align:center;font-weight:bold;font-size:18px">电影导演</th>                      
                          <th style="text-align:center;font-weight:bold;font-size:18px;width:210px">操作</th>
                       </tr>
                    </thead>
                   <tbody class="movies-list"></tbody>
                </table>
                <div style="margin:auto;width:350px;flex-direction:column;font-size:16px;margin-top:20px;">
                   <div style="margin:auto;display:flex;justify-content:space-between;">
                      当前页：<select class="curPage"style="height:20px;border:1px solid #d2d2d2;"></select>
                      显示条数：<input type="text" name="eachPage" value="${this.data.eachPage}"style="width:30px;height:20px;border:1px solid #d2d2d2;text-align:center;">
                      总条数：<span class="total"style="display:inline-block;border:1px solid #d2d2d2;width:30px;text-align:center;height:20px"></span>
                  </div>
                   <div style="margin-top:20px;display:flex;justify-content: space-between;">
                        <button class="first-btn layui-btn layui-btn-sm">首页</button>
                        <button class="prev-btn layui-btn layui-btn-sm">上一页</button>
                       <button class="next-btn layui-btn layui-btn-sm">下一页</button>
                       <button class="last-btn layui-btn layui-btn-sm">尾页</button>
                   </div>
                </div>
            </div>
        `);
        // 获取查找的下拉列表select,
        this.$selectOption = $("#selectOption");
        // 获取查找功能用户的输入,
        this.$selectValueEle = $("#selectvalue");
        // 确认查询按钮
        this.$selBtn = $("#selBtn")
        this.$moviesList = $(".movies-list"); // 获取tbody节点
        this.$curPageEle = $(".curPage"); // 当前页
        this.$eachPageEle = $("input[name=eachPage]"); // 每页显示条数
        this.$totalEle = $(".total"); // 总条数
        this.$firstBtuEle = $(".first-btn"); //  首页
        this.$prevBtuEle = $(".prev-btn"); // 上一页
        this.$nextBtuEle = $(".next-btn"); // 下一页
        this.$lastBtuEle = $(".last-btn"); // 尾页
        this.$tableEle = $(".moviesTable"); //获取table 方便后续添加事件代理
        // 渲染出查询的选项
        let str = mooveisProps.map(item => {
            return `<option value=${item.key}>${item.name}</option>`
        })
        // 渲染查询初始页面
        this.$selectOption.html(`<option value="allInfo">全部</option>${str}`)
    };
    // 再次渲染 table表格
    rerender(data) {
        //this.data.rows拿到整个显示的数据 
        const str = data.map((item) => {
            return `
                <tr style="text-align:center;">   
                    <td style="width:150px;font-size:16px">${item.name}</td>
                    <td style="width:100px;font-size:16px">${item.type}</td>
                    <td style="width:100px;font-size:16px">${item.area}</td>
                    <td style="width:100px;font-size:16px">${item.time}</td>
                    <td style="width:100px;font-size:16px">${item.upDate}</td>
                    <td style="width:120px;text-align:center"><img src="/resource/${item.poseter}"/></td>
                    <td style="width:100px;font-size:16px">${item.director}</td>
                    <td style="width:180px">
                     <button class="layui-btn layui-btn-sm"data-optin="alter" data-index="${item._id}">详 情</button>
                     <button class="layui-btn layui-btn-sm layui-btn-danger" data-optin="delete" data-index="${item._id}">删 除</button>
                     <button class="layui-btn layui-btn-sm" data-optin="poseter"data-index="${item._id}">海 报</button>
                    </td>
                </tr>
                 `
        }).join("");
        this.$moviesList.html(str);
        this.$totalEle.html(this.data.total);

        // 创建一个空的options
        let options = "";
        //i从1开始 如果i小于等于总页数 
        for (let i = 1; i <= this.data.maxPage; i++) {
            options += `<option value="${i}">${i}</option>`;
        }
        // 获取到当前页到值
        this.$curPageEle.html(options).val(this.data.curPage);
    }

    async getMovies() {
        const {
            curPage,
            eachPage
        } = this.data;
        //  // 调用远程方法 获取数据，需要两个参数，当前页curPage和一页的总数eachPage
        const data = await MoviesApi.getMovies({
            curPage,
            eachPage
        });
        // 合并  把data里的内容筛选到this.data里
        Object.assign(this.data, data)
        // 直接调用 再次渲染页面内容
        this.rerender(this.data.rows);
    };
    // 渲染完成之后执行
    mounted() {
        // 电影
        this.getMovies();

    }
    // 首页

    first() {
        // 判断是否是在第一页，如果是，则不进行操作，如果不是，则跳转到第一页
        if (this.data.curPage === 1) return;
        this.data.curPage = 1;
        //重新渲染
        this.getMovies();
    };
    // 尾页
    last() {
        //  // 判断是否在最后一页，如果是最后一页，则不进行操作，如果不是则跳转到最大页maxPage
        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage = this.data.maxPage;
        this.getMovies();
    }
    // 上一页
    prev() {
        //判断当前页是否是第一页，如果是，则不进行操作，如果不是，则当前页减1
        if (this.data.curPage === 1) return;
        this.data.curPage = this.data.curPage - 1;
        this.getMovies();
    };
    // 下一页
    next() {
        // 判断当前页是不是最大页，如果是，则不进行操作，如果不是，则当前页加1
        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage = this.data.curPage + 1;
        this.getMovies();
    };
    // 修改当前页
    setEachPageHadle(e) {
        // e.target.value拿到节点的value值 隐式转换
        this.data.eachPage = ~~e.target.value;
        this.getMovies();
    }
    //当前页下拉列表修改事件
    changecurPageHandel(e) {
        this.data.curPage = e.target.value;
        this.getMovies();
    }
    //操作栏事件
    async tableHandle(e) {
        let event = window.event || e;
        if ($(event.target).attr("data-optin") == 'alter') {
            // 获取触发节点的id
            const id = $(event.target).attr("data-index");
            console.log(id);
            //通过id获取修改电影的完整数据
            const tmep = this.data.rows.filter(item => item._id == id);
            console.log(tmep);
            //将获取到修改的电影数据存到本地浏览器 
            sessionStorage.setItem("changeMovie", JSON.stringify(tmep));
            //跳转到修改页面
            location.hash = `#/info/alterMovie`;

            //删除
        } else if ($(event.target).attr("data-optin") == 'delete') {
            // 拿到用户的选择，赋值给option
            const option = window.confirm('确定删除吗');
            if (option) {
                // 获取到删除得id
                const _id = $(e.target).attr('data-index');
                // 将获取到的id值作为参数发送请求
                await MoviesApi.deleteMovie({
                    _id
                });
                // 调用 getmovies 方法并提示删除成功
                this.getMovies();
                window.alert('删除成功');
                    //跳转到修改页面
            location.hash = `#/info/movies`;
            }
        } else if ($(event.target).attr("data-optin") == 'poseter') {
            // 获取触发节点的id
            const temp = $(event.target).attr("data-index");
            //跳转到上传电影图片页面,将需要上传图片电影的id携带至上传的页面     
            location.hash = `#/info/uploadMovies/${temp}`;
        }
    }
    changeSelectOption() {
        // 判断用户是不是选择的全部信息,是的话就渲染全部信息
        let option = this.$selectOption.val()
        if (option == "allInfo") {
            this.rerender(this.data.rows)
        }
    }

    async select() {
        let option = this.$selectOption.val()
        // 判断用户是不是选择的全部信息
        if (option == "allInfo") {
            this.rerender(this.data.rows)
        } else {
            let data = {}
            data[option] ={$regex:`${this.$selectValueEle.val()}`,$options:`i`} 
            console.log("chaxun",data);
            this.data.selIfo = await MoviesApi.select(data)
            if (this.data.selIfo.length) {
                this.rerender(this.data.selIfo)
            } else {
                layer.msg("未查到相关信息", {
                    icon: 2
                })
            }
        }
    }

    // 添加事件
    handle() {
        //当前页下拉列表 
        this.$curPageEle.on("change", this.changecurPageHandel.bind(this));
        // 首页 尾页
        this.$firstBtuEle.on("click", this.first.bind(this));
        this.$lastBtuEle.on("click", this.last.bind(this));
        // 上一页下一页
        this.$prevBtuEle.on("click", this.prev.bind(this));
        this.$nextBtuEle.on("click", this.next.bind(this));
        // 修改当前页 失焦当时
        this.$eachPageEle.on('blur', this.setEachPageHadle.bind(this));
        //table栏添加事件代理
        this.$tableEle.on('click', this.tableHandle.bind(this));
        this.$selBtn.on("click", this.select.bind(this));
        // 查询类型的改变事件
        this.$selectOption.on("change", this.changeSelectOption.bind(this));

    };
};